Images and your store
Images are an essential part of any online store. The ability for a customer to clearly see the product will greatly influence their decision to buy. Additionally, standard images not related to any products are an important part of making your online store pleasing to the eye. EROL allows you to add product images and non-product images easily.


Inserting an image for an item

To insert an image, for any item, using the main image insertion area:
1. Ensure you are on the Item Details tab for the relevant Item
2. Click 'Browse' and search for the image from the EROL images folder. If your image is outside of the EROL images folder, you can locate it and EROL will save it to the images folder.
3. Once selected the image will be added into the image preview field.

Zoom to Fit Window
If your image is larger than the image preview field, or indeed much smaller, you can click the 'Full Preview' button to launch the image into a pop-up window that displays the image in its entirety.


Height and Width
When you insert an image into the image preview field, the height and width of that image will be detected by EROL and the values automatically inserted into the 'Height' and 'Width' fields. You can however manually alter the height and/or width of the image by inserting your own values into these fields.

Note: Altering the height and width values in EROL will affect the way the image is displayed in your store.


Putting H Space and V Space on an image
H Space and V Space refer to the Horizontal (H) and Vertical (V) space around your image.

The H Space and V Space can be useful if you need to create space between your image and any text or other elements in your Display Item.

The H Space and V Space settings are not controlled on an item-by-item basis, but rather on the template assigned to that item.

To modify the H Space and V Space settings on an image:
1. Click the 'Edit' button on the Template Tab
2. Decide whether you want to modify the current template, or create a new one
3. Click the small 'Settings' button attached to the Image toggle button to launch the settings for the image.

The difference between the main image insertion area and an image added in the HTML editor
In terms of store functionality, there is a big difference between the two methods of image input.

The image inserted using the standard image insertion area performs two functions:
1) It acts as a link to the expanded view (if there is an expanded view)
2) It provides a source image for the thumbnail image that gets generated and displayed in the basket (and order form) when that product is purchased.

In terms of what gets displayed in the store there is no difference between adding a Display Item image using the standard image insertion area on the Item Details tab and adding an image using the EROL HTML Editor's image insertion function.

They will both be displayed in the same manner in the store as identical formatting can be achieved using:
1) The Template Editor for the formatting of the image inserted in the main image insertion area
2) The HTML tools available for an image inserted using the EROL HTML Editor

The benefit of using the HTML Editor to insert an image is that it allows you to add more than one image per single item.


Recommended size for images
For any Product Item it is recommended that the size of the image in the 'normal view' does not exceed 150 pixels in width (and not over 10 kilobytes size). Any image in the 'expanded view' should not really exceed 300 pixels in width (and not over 20k in size).

Images used in Display Items can be any size whatsoever, although it is recommended to keep the file size as low as possible to ensure the page loads quickly.

Images used in Link Items should ideally be reasonably small in size, as most Link Item images will be buttons. If you are using a rollover image ensure that the 'on' and 'off' state are both reasonably small in dimensions and file size, since larger file sizes will slow down the rollover effect.


Recommended format for images
Images you use in your store should be saved as either .jpg's or .gif's.

Deciding which format is going to be best is a matter of trial and error. The best format is the one that compresses the image down to the smallest file size coupled with the lowest loss of quality.

A general rule of thumb is that photographs tend to compress better as .jpgs, while images with fewer than 256 colours tend to compress better as .gifs.

Converting your images to .jpg's or .gif's cannot be done in EROL. You will need to utilise a separate graphics program to do this.


Naming conventions for images
EROL does not allow you to include spaces in your image names, as some web servers do not support them.

Should you require spaces in your image names, it is recommended you use the underscore character ' _ ' instead.


Importing images into the EROL images folder
All images you wish to use in your store need to be inserted into the default EROL images folder.

This folder is automatically created in the EROL root directory when you first install the software and can be accessed using Windows Explorer.

When you browse and select an image elsewhere on your hard-drive using EROL, the image will automatically get added into the 'images' folder.